<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vivo</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/rem.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> -->
    <link rel="stylesheet" href="style/style.css?v=000001" />
    <style>
      .media-img {
        position: relative;
      }
      .media-img img {
        position: absolute;
        height: 10.58rem;
        left: -5rem;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="section section-1">
        <div class="media-img mashed">
          <div id="animation_canvas" class="animation_canvas"></div>
        </div>
        <div class="dec">
          <div class="line-1">
            <img
              class="slogan1-1 tx-transform"
              src="image/part1/slogan1-1.png"
            />
            <img
              class="slogan1-2 tx-transform"
              src="image/part1/slogan1-2.png"
            />
          </div>
          <div class="line-2 tx-transform">
            <a href="" class="a-1" style="margin-right: 0.5rem;">官方购买 ></a>
            <a href="" class="a-2">门店购买 ></a>
          </div>
        </div>
      </div>
      <div class="section section-2">
        <div class="media-img">
          <img src="image/part1/scl1.jpg" id="scl-img1">
          <img src="image/part1/scl2.jpg" id="scl-img2">
          <div id="animation_canvas2"  class="animation_canvas"></div>
        </div>
      </div>
      <div class="section section-3">
        <div class="media-img" style="opacity: 0;">
          <div id="animation_canvas3" class="animation_canvas">

          </div>
        </div>
        <div class="dec-box">
          <div class="dec dec1">
            <p style="font-size: 0.24rem;margin-bottom: 0.14rem;">全焦段影像系统。</p>
            <p style="font-size: 0.6rem;">全焦段，更专业。</p>
          </div>
          <div class="dec dec2">
            <p style="line-height: 0.32rem;font-size: 0.24rem;color: #89898e;">
              X30基于强大的相机模组，一跃迈向后置四摄<br>
              时代。多焦段覆盖，带来全新影像，让你的每<br>
              一面都出色。
            </p>
          </div>
          <div class="dec dec3 befline">
            <p class="p1">800万广角微距镜头。</p>
            <p class="p2">
              16mm等效全画幅焦距<br>
              F2.2镜头光圈<br>
              112°镜头视角
            </p>
            <p class="p2">*开启广角矫正后视角大小为108°</p>
          </div>
          <div class="dec dec4 befline">
            <p class="p1">6400万主摄。</p>
            <p class="p2">
              26.4mm等效全画幅焦距<br>
              F1.8镜头光圈
            </p>
          </div>
          <div class="dec dec5 befline">
            <p class="p1">3200万2x专业人像镜头。</p>
            <p class="p2">
              50mm等效全画幅焦距<br>
              F2.0镜头光圈
            </p>
          </div>
        </div>
      </div>
      <div class="section section-4">
        <div class="media-img">
          <div id="animation_canvas4" class="animation_canvas">

          </div>
        </div>
        <div class="dec dec1">
          <p style="font-size: 0.24rem;margin-bottom: 0.14rem;">60倍超级变焦。</p>
          <p style="font-size: 0.6rem;">天涯之遥，近在咫尺。</p>
        </div>
        <div class="dec dec2">
          <p class="p2">
            超强5倍潜望式长焦镜头，等效全画幅单反的<br>
            中长焦135mm焦段。
          </p>
        </div>
        <div class="dec dec3">
          <p class="p2">
            结合超分算法，让超远景观，近在眼前，远胜普通<br>
            高倍变焦。你可以在最后排拍到清晰的屏幕，也<br>
            能拍出细节丰富的超级月亮。
            <a href="" style="display: block;margin-top: 1.26rem;font-size: 0.18rem">购买我的X30手机 ></a>
          </p>
        </div>
      </div>
      <div class="section section-5">
          <div class="carm">
              <img src="image/part1/carm.png">
              <div class="pro"></div>
          </div>
      </div>
      <div class="section section-6">
          <div class="carm" style="opacity: 0;">
              <div class="pro"></div>
          </div>
          <div class="dec dec1">
              <p style="font-size: 0.24rem;margin-bottom: 0.14rem;">50mm专业人像镜头。</p>
              <p style="font-size: 0.6rem;">50mm专业人像镜头。</p>
          </div>
          <div class="dec dec2">
              <p style="line-height: 0.32rem;font-size: 0.24rem;color: #89898e;">
                  50mm专业人像镜头，是X30为你独家定制的<br>
                  人像镜头，选择符合人眼视觉透视的50mm焦<br>
                  段，以科学精神设计专业人像镜头，打造无畸变<br>
                  自然人像。
              </p>
          </div>
      </div>
      <div class="section section-7">
          <div class="carm">
              <img src="image/part1/carm3.png" class="carm-bg">
            <img src="image/part1/1_031.jpg" class="pto">
            <img src="image/part1/1_032.jpg" class="pto">
            <img src="image/part1/1_033.jpg" class="pto">
          </div>
        <div class="dec">
          <p>
            配合vivo AI人眼追焦技术，让你在人像拍摄中<br>
            更沉浸创作构图，不用时刻纠结是否合焦，运动中<br>
            的人像轻松捕捉、定格瞬间。
          </p>
        </div>
      </div>
      <div class="section section-8">
        <div class="carm">
          <img src="image/part1/carm.png" class="carm-bg">
          <img src="image/part2/carm1.jpg" class="carm1">
            <img src="image/part2/carm2.jpg" class="carm2">
        </div>
        <div class="dec dec1">
          <p style="font-size: 0.24rem;margin-bottom: 0.14rem;">vivo专业人像模式。</p>
          <p style="font-size: 0.6rem;">人像大师，一触即艺术。</p>
        </div>
        <div class="dec dec2">
          <p style="line-height: 0.32rem;font-size: 0.24rem;color: #89898e;">
            自动调取50mm专业人像镜头拍摄：自研虚化<br>
            算法，带来人与背景的完美分割，质感更细腻；<br>
            多风格人景分离技术，让风格展现不再充满滤<br>
            镜味、让你的人像大片层次分明；自研美颜算<br>
            法，可基于肤色肤质等自由调节不同风格，让<br>
            你轻松做自己的人像大师。
          </p>
        </div>
      </div>
      <div class="section section-9">
        <div class="carm">
          <img src="image/part1/carm.png" class="carm-bg">
          <img src="image/part2/carm3.jpg" class="carm1">
        </div>
        <div class="dec dec1">
          <p style="font-size: 0.24rem;margin-bottom: 0.14rem;">6400万像素超清主摄。</p>
          <p style="font-size: 0.6rem;">6400万像素超清主摄。</p>
        </div>
        <div class="dec dec2">
          <p style="line-height: 0.32rem;font-size: 0.24rem;color: #89898e;">
            6400万像素主摄，拍下更清晰的质感世界，<br>
            让你的照片经得起重重放大。
          </p>
        </div>
      </div>
      <div class="section section-10">
        <div class="carm">
          <img src="image/part1/carm.png" class="carm-bg">
          <div class="carmimg">
            <img src="image/part2/carm3.jpg" class="carm1">
          </div>
        </div>
        <div class="dec dec1">
          <p style="font-size: 0.24rem;margin-bottom: 0.14rem;">超清夜景2.0。</p>
          <p style="font-size: 0.6rem;">夜色，更出色。</p>
        </div>
        <div class="dec dec2">
          <p style="line-height: 0.32rem;font-size: 0.24rem;color: #89898e;">
            巧妙夜景算法，智能识别光线环境，瞬拍12至<br>
            16张照片合而为一，多帧降噪融合高清艺术之<br>
            作；璀璨夜景一键还原，明暗层次更加清晰。
          </p>
        </div>
      </div>
      <div class="section section-11" >
        <div class="carm">
          <img src="image/part1/carm.png" class="carm-bg">
          <div class="carmimg">
            <img src="image/part2/carm4.png" class="carm1" style="opacity: 1;">
            <img src="image/part2/carm5.png" class="carm2">
            <img src="image/part2/carm6.png" class="carm3" style="top: -0.1rem;">
            <img src="image/part2/carm7.png" class="carm4">
          </div>
        </div>
        <div class="dec dec1" >
          <p style="font-size: 0.24rem;margin-bottom: 0.14rem;">逆光-Hyper HDR。</p>
          <p style="font-size: 0.6rem;">光，被你征服。</p>
        </div>
        <div class="dec dec2">
          <p style="line-height: 0.32rem;font-size: 0.24rem;color: #89898e;">
            vivo Hyper HDR逆光技术，动态范围领<br>
            先行业，在高动态下，依旧能获取明暗对比鲜<br>
            明影调合理的人像照片。无论落日余晖或是城<br>
            市夜幕，只需用你的X30指挥光。
          </p>
        </div>
      </div>
      <div class="section section-12">

        <div class="dec dec1" >
          <p style="font-size: 0.24rem;margin-bottom: 0.14rem;">广角微距。</p>
          <p style="font-size: 0.6rem;">见其广，</p>
        </div>
        <div class="dec dec2">
          <p>配备800万像素广角微距镜头，112°大视角*，轻<br>
            松拍摄大场面。</p>
          <p style="font-size: 0.14rem;margin-top: 0.3rem">*开启广角矫正后视角大小为108°</p>
        </div>
        <div class="carm">
          <img src="image/part1/carm.png" class="carm-bg">
          <div class="carmimg">
            <img src="image/part2/carm8.jpg" class="carm1" style="    left: -0.05rem;
    top: 0.03rem;">
          </div>
        </div>
      </div>
      <div class="section section-13" style="">

        <div class="dec dec1" >
          <p style="font-size: 0.6rem;">
            <span>见其广，</span>
            <span style="">亦见其微。</span>
          </p>
        </div>
        <div class="dec dec2">
          <p>配备800万像素广角微距镜头，112°大视角*，轻<br>
            松拍摄大场面。</p>
          <p style="font-size: 0.14rem;margin-top: 0.3rem">*开启广角矫正后视角大小为108°</p>
        </div>
        <div class="carm">
          <img src="image/part1/carm.png" class="carm-bg">
          <div class="carmimg">
            <img src="image/part2/carm9.jpg" class="carm1" style="    left: -0.05rem;
    top: 0.03rem;">
          </div>
        </div>
      </div>
    </div>
    <script src="js/main.js?v=000001"></script>
  </body>
</html>
